useFormStatus is a Hook that gives you status information of the last form submission.
useFormStatus does not take any parameters.
it must be called from a component that is nested inside the <form>.
useFormStatus solves prop drilling. It allows your SubmitButton to be smart and know when its parent form is submitting without needing any props(as with useActionState) passed to it.
useFormStatus will only return pending: true if it is rendered inside the <form> tags. If you put it in the same component as the <form>, it won't work because it can't see the parent it is currently part of.
useFormStatus also provides the data (a FormData object) being sent. This is great for Optimistic UI (showing the user what they just typed before the server even responds).
pending: A boolean. If true, this means the parent <form> is pending submission. Otherwise, false.
data: An object implementing the FormData interface that contains the data the parent <form> is submitting. If there is no active submission or no parent <form>, it will be null.
method: A string value of either 'get' or 'post'. This represents whether the parent <form> is submitting with either a GET or POST HTTP method. By default, a <form> will use the GET method and can be specified by the method property.
action: A reference to the function passed to the action prop on the parent <form>. If there is no parent <form>, the property is null. If there is a URI value provided to the action prop, or no action prop specified, status.action will be null.